<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			.fromNative {
				padding: 20px;
				width: 80%;
				margin: 20px auto;
				border: #2C405A solid 1px;
				box-sizing: border-box;
			}

			.btn-box {
				text-align: center;
			}
			.btn-box button {
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>这个是H5页面</h1>
			<div class="fromNative">来着uniApp的消息1:</div>
			<a href="about.html">about页面</a>
			<div class="btn-box">
				<button type="button" id="nativeShow">调用Uniapp提前注册好的nativeShow方法</button>
				<button type="button" id="defaultHandler">调用Uniapp提前注册好的默认处理函数</button>
				<button type="button" id="toWeb">跳转页面</button>
			</div>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<!-- JSbridge -->
		<script src="js/uni-js-bridge.es5.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/**
			 * 注册了一个函数，提供给Uni-app调用
			 */
			UniJsBridge.registerHandler("test", (data, responseCallback) => {
				// data: 是客户端给H5的参数
				setFromNativeMessage(JSON.stringify(data))
				// 把参数传递给客户端,如果不执行的话，uni-app是无法执行回调的
				responseCallback('我是给uni-app的参数' + Date.now());
			});
			
			/**
			 * 在H5端配置一个默认处理函数，提供给uni-app调用
			 */
			UniJsBridge.init((data, responseCallback) => {
			    alert(JSON.stringify(data));
			
			    responseCallback({
			        initData: "给uni-app使用的",
			    });
			});

			document.getElementById('nativeShow').addEventListener('click', evt => {
				/**
				 * 触发uniapp中注册好的函数
				 */
				UniJsBridge.callHandler(
					"nativeShow", {
						nativeShowData: "当前时间：" + new Date().getTime()
					},
					res => {
						setFromNativeMessage(JSON.stringify(res));
					}
				);
			})
			
			document.getElementById('defaultHandler').addEventListener('click', evt => {
				/**
				 * 触发uniapp中注册好的默认处理函数
				 */
				UniJsBridge.send({ sendData: "给uni-app的" }, res => {
				    alert(JSON.stringify(res));
				});
			})
			
			document.getElementById('toWeb').onclick = function () {
				UniJsBridge.uni.navigateTo({
					url: '/pages/web/web'
				})
			}

			function setFromNativeMessage(message) {
				document.querySelector('.fromNative').innerHTML = '来着uniApp的消息:' + message
			}
		</script>
	</body>
</html>
